<template>
  <div>
    <header>
      <div class="nav container">
        <a href="/weather" class="nav-left"
          ><i class="fa-solid fa-sun"></i>
          <p>新中地天气</p></a
        >
        <div class="nav-center">
          <div class="weather-live" v-show="isLoad">
            <h4>{{ city }}</h4>
            <span> 实时天气：{{ temperature }}</span>
            <span> {{ wind }}</span>
          </div>
        </div>
        <div class="nav-right">
          <i class="fa-solid fa-circle-info" @click="isShowHint = true"></i
          ><i
            v-show="getCity ? isShow : false"
            class="fa-solid fa-plus"
            @click="handleClick"
          ></i>
        </div>
      </div>
    </header>
    <div v-show="isShowHint" class="hint">
      <h2>关于：</h2>
      <p>这个应用可以用来追踪你选择城市的当前天气</p>
      <br />
      <h2>如何使用：</h2>
      <p>
        1.点击搜索框输入你希望追踪的城市<br />
        2.在搜索结果中选中一个城市，你将获取当地最新的天气<br />
        3.点击右侧的＋号可以将追踪城市的天气情况保存在首页<br />
      </p>
      <br />
      <h2>移除城市：</h2>
      <p>如果你不想在首页关注某个城市,可以通过底部的按钮删 除它</p>
      <br />
      <button @click="isShowHint = false">关闭</button>
    </div>
    <router-view />
  </div>
</template>

<script>
import WeatherForecasts from '@/components/WeatherForecasts'
import { getCity, getAdcode, getLives } from '@/api/weather'

export default {
  name: 'Weather',
  components: { WeatherForecasts },
  data() {
    return {
      city: '',
      adcode: '',
      lives: '',
      isLoad: false,
      savecitys: [],
      isShow: true,
      temp: [],
      isShowHint: false
    }
  },
  computed: {
    temperature() {
      return `${this.lives.weather} ${this.lives.temperature}℃`
    },
    wind() {
      return `${this.lives.winddirection}风${this.lives.windpower}级`
    },
    getAdcode() {
      return this.$route.params.adcode
    },
    getCity() {
      return this.$route.query.serach
    }
  },
  created() {
    this.getData()
    let res = localStorage.getItem('savecitys')
    if (!res) {
      localStorage.setItem('savecitys', JSON.stringify([]))
    } else {
      this.savecitys = JSON.parse(res)
    }
    this.isSave()
  },
  updated() {
    this.isSave()
    if (this.getAdcode) {
      this.getTemp()
    }
    let res = localStorage.getItem('savecitys')
    if (!res) {
      localStorage.setItem('savecitys', JSON.stringify([]))
    } else {
      this.savecitys = JSON.parse(res)
    }
  },
  methods: {
    async getData() {
      //获取所在ip城市
      const getCityRes = await getCity()
      this.city = getCityRes.data.city
      //获取城市adcode
      const getAdcodeRes = await getAdcode(this.city)
      this.adcode = getAdcodeRes.data.geocodes[0].adcode
      //通过adcode获取实时天气
      const getLivesRes = await getLives(this.adcode)
      this.lives = getLivesRes.data.lives[0]
      this.isLoad = true
    },
    async getTemp() {
      const getLivesRes = await getLives(this.getAdcode)
      this.temp = getLivesRes.data.lives[0].temperature
    },
    isSave() {
      const res = this.savecitys.find(item => item.city == this.getCity)
      if (res) {
        this.isShow = false
      } else {
        this.isShow = true
      }
    },
    handleClick() {
      this.savecitys.push({
        adcode: this.getAdcode,
        city: this.getCity,
        temp: this.temp
      })
      localStorage.setItem('savecitys', JSON.stringify(this.savecitys))
      this.isShow = false
    }
  }
}
</script>

<style scoped>
@import 'https://cdn.bootcdn.net/ajax/libs/font-awesome/6.2.0/css/all.min.css';

header {
  position: fixed;
  top: 0;
  width: 100%;
  background: #00668a;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

header .nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 10rem;
  color: #fff;
}
.nav .nav-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 24px;
  line-height: 2rem;
  text-decoration: none;
  color: #fff;
}
.nav .nav-center {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 18px;
}
.nav .nav-center span {
  font-size: 14px;
}
.weather-live {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.weather-live h4 {
  font-size: 18px;
}
.weather-live span {
  font-size: 14px;
}
.nav .nav-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  font-size: 1.25rem;
}
.nav .nav-right i {
  cursor: pointer;
  transition: all 0.3s;
}
.nav .nav-right i:hover {
  color: rgb(0 78 113 / 1);
}

.hint {
  z-index: 1;
  position: fixed;
  top: 150px;
  left: 50%;
  padding: 16px;
  background: #fff;
  line-height: 1.2rem;
  transform: translateX(-50%);
  animation: opacityChange 1s;
}
.hint h2 {
  font-size: 16px;
}
.hint p {
  font-size: 12px;
}
.hint button {
  padding: 8px 24px;
  background: #00668a;
  color: #fff;
  cursor: pointer;
  appearance: none;
  border: none;
  outline: none;
}

@keyframes opacityChange {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>
